<template>
  <div class="mb-[20px] p-[20px] bg-[#dbdbdb]">
    <Form ref="formRef" :label-col="{ style: { width: '70px' } }" :model="formState" :rules="rules">
      <FormItem label="报价方式" name="feeType">
        <RadioGroup v-model:value="formState.feeType" @change="changeFeeType">
          <Radio value="1">拼车</Radio>
          <Radio value="2">包车</Radio>
          <Radio value="3">其它</Radio>
        </RadioGroup>
      </FormItem>

      <div class="flex">
        <div v-if="formState.feeType == 1" class="flex">
          <FormItem label="提货费" name="tihuo">
            <Input type="number" v-model:value="formState.tihuo" />
          </FormItem>

          <FormItem label="运输费" name="yunshu">
            <Input type="number" v-model:value="formState.yunshu" />
          </FormItem>

          <FormItem label="送货费" name="songhuo">
            <Input type="number" v-model:value="formState.songhuo" />
          </FormItem>
        </div>

        <div v-if="formState.feeType == 2">
          <FormItem label="包车价" name="baoche">
            <Input type="number" v-model:value="formState.baoche" />
          </FormItem>
        </div>

        <div v-if="formState.feeType == 3">
          <FormItem label="运输费" name="yunshu">
            <Input type="number" v-model:value="formState.yunshu" />
          </FormItem>
        </div>

        <FormItem class="ml-[10px]"> 合计：{{ total.toFixed(2) }}元 </FormItem>
      </div>

      <FormItem class="w-[100%]" label="报价说明">
        <Textarea
          class="w-[100%]"
          :rows="5"
          v-model:value="formState.remark"
          placeholder="请输入内容"
        />
      </FormItem>
    </Form>
    <div>注意事项:</div>
    <div>1、以上报价单均是严格技萌双方签署的运输合同价格条款执行，如有不符，以运协议约定为准</div>
    <div
      >2、本预估报价单仅为暂估可预见的费用，若产生保险费、等时费、放空费、狭卸费、压车费等异常费用，需在结算时单笔申请</div
    >

    <div>3、本预估报价单不作为双方的结算、对账、开票、付款依据</div>
    <div>4、我司承诺预估报价单均在T+0日完成，特殊况及节假日除外</div>
    <div>5、其他未尽事直，以双方签看的年度运输合同为准</div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, defineEmits } from 'vue';
  import { Form, FormItem, Input, RadioGroup, Radio, message, Textarea } from 'ant-design-vue';
  import type { Rule } from 'ant-design-vue/es/form';

  import { postQuote, getCost } from '@/api/waybillManagement/index';

  // import { getDate } from '@/utils/time';

  const emit = defineEmits(['onSuccess', 'onFailed']);

  // const props = defineProps({
  //   queryParams: { type: Object },
  //   fromType: { type: String },
  // });

  const formRef = ref();

  const formState: any = ref({
    shippingOrderId: 0,
    shippingOrderIdList: [],
    fileLabel: 'quote',
    expireDate: '', //报价有效期
    remark: '', //申请备注
    tihuo: 0,
    yunshu: 0,
    songhuo: 0,
    baoche: 0,
    contractTihuo: '', //提货费-合同价
    contractYunshu: '', //运输费-合同价
    contractSonghuo: '', //送货费-合同价
    contractBaoche: '', //包车费-合同价
    feeType: 1, //报价方式
  });

  const rules: Record<string, Rule[]> = {
    tihuo: [{ required: true, message: '请输入提货费', trigger: 'blur' }],
    yunshu: [{ required: true, message: '请输入运输费', trigger: 'blur' }],
    songhuo: [{ required: true, message: '请输入送货费', trigger: 'blur' }],
    baoche: [{ required: true, message: '请输入包车费', trigger: 'blur' }],
    vehicleModel: [{ required: true, message: '请选择车辆类型', trigger: 'change' }],
    feeType: [{ required: true, message: '请选择报价方式', trigger: 'change' }],
  };

  const total = computed(() => {
    if (formState.value.feeType == 1) {
      return (
        Number(formState.value.tihuo) +
        Number(formState.value.yunshu) +
        Number(formState.value.songhuo)
      );
    } else if (formState.value.feeType == 2) {
      return Number(formState.value.baoche) || 0;
    } else {
      return Number(formState.value.yunshu) || 0;
    }
  });

  const initFormState = async (queryParams) => {
    const res = await getCost(queryParams.shippingOrderIdList);
    if (res) {
      formState.value = {
        ...queryParams,
        feeType: queryParams.feeType || '1',
        freightId: res.freightId || '',
        freightType: res.freightType || '',
        contractTihuo: Number(res.tihuo) || 0,
        contractYunshu: Number(res.transportPrice) || 0,
        contractSonghuo: Number(res.deliverPrice) || 0,
        contractBaoche: Number(res.charteredPrice) || 0,
        tihuo: Number(res.tihuo) || 0,
        yunshu: Number(res.transportPrice) || 0,
        songhuo: Number(res.deliverPrice) || 0,
        baoche: Number(res.charteredPrice) || 0,

        tonPrice: Number(res.tonPrice),
        remark: '',
      };
    } else {
      formState.value = {
        ...queryParams,
        feeType: queryParams.feeType || '1',
        remark: '',
      };
    }
    console.log('🚀 ~ initFormState ~ formState:', formState);
  };

  const changeFeeType = () => {
    // formState.value.tihuo = formState.value.yunshu = formState.value.songhuo = 0;
  };

  const Commit = async () => {
    formRef.value
      .validate()
      .then(async () => {
        try {
          if (formState.value.feeType == 2) {
            formState.value = {
              ...formState.value,
              yunshu: formState.value.baoche,
            };
          }
          await postQuote(formState.value);
          message.success('处理成功');
          formState.value = {};
          emit('onSuccess');
        } catch (error) {
          console.log('🚀 ~ .then ~ error:', error);
          message.error(error.message);
          emit('onFailed');
        }
      })
      .catch((error) => {
        console.log('error', error);
        message.error('请输入完整内容！');
        emit('onFailed');
      });
  };

  defineExpose({
    initFormState,
    Commit,
  });
</script>
